<template>
	<view class="details">
		<xbd-pages-content :title="title">
			<template #content>
				<view class="content" :style="'minHight : ' + windowHeight + 'px;'">
					<view class="box">
						<view class="">
							<text>会议室</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.meeting}}</text>
						</view>
						<view class="icon">
							<image v-if="fromDate.status===1" src="../../static/images/meal/yes.svg" mode=""></image>
							<image v-else-if="fromDate.status===0" src="../../static/images/meal/stay.svg" mode="">
							</image>
							<image v-else-if="fromDate.status===2" src="../../static/images/meal/no.svg" mode="">
							</image>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>容纳人数</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.capacity}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>会议名称</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.name}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>主持人</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.host}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>会服选项</text>
						</view>
						<view class="box_right">
							<text v-if="fromDate.service">是</text>
							<text v-else>否</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>会议主题</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.title}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>会议内容</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.content}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>会议日期</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.date| timeFormat("YYYY-MM-DD")}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>会议时间</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.startTime+' - '+fromDate.endTime}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>会议时长</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.duration}}min</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>参会人员</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.attendees.length}}人</text>
						</view>
					</view>


					<view class="line">
					</view>

					<view class="title">流程</view>
					<view class="flow">

						<view class="type" v-for="(item,index) in fromDate.apply_process" :key="index">
							<view class="left">
								<view class="radio">
								</view>
								<view class="line2">
								</view>
							</view>
							<view class="msg">
								<view class="msg_box">
									<view class="msg_tag">
										<view class="name">
											<text class="people">{{item.identity}}：</text>
											<text>{{item.name}}</text>
										</view>
										<text v-if="item.state==='refused'" class=" no">拒绝</text>
										<text v-else-if="item.state==='passed'" class=" yes">同意</text>
									</view>
									<view class="date">
										<text>{{item.time | timeFormat('MM-DD HH:mm')}}</text>
									</view>
								</view>
								<view v-if="item.state==='refused'" class="reason">
									<text>拒绝原因：{{item.reason}}</text>
								</view>
							</view>
						</view>

					</view>
					<view class="foot">
						<view class="btns" v-if="type === '2' && fromDate.status === 0&& showBtn === true ">
							<button class="draft" @click="draft">拒绝审批</button>
							<button class="upload" @click="pass">审批通过</button>
						</view>
						<view v-else-if="type === '1' && fromDate.status === 0" class="btns">
							<button class="revocation" @click="revocation">撤销申请</button>
						</view>
					</view>
					<xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm" @dialogCancel="dialogCancel">
						<template>
							<view class="draft_reason">
								<text>拒绝审批</text>
								<uni-easyinput class="textarea" type="textarea" v-model="draftResone"
									placeholder="请输入拒绝原因：" :maxlength="30"></uni-easyinput>
								<!-- #ifdef APP-PLUS || H5 -->
								<view class="mit">
									字数限制：30字
								</view>
								<!-- #endif -->
							</view>
						</template>
					</xbd-popup>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		Meeting
	} from '@/api/index.js';
	export default {
		data() {
			return {
				flag: true,
				id: '',
				title: '会议详情',
				type: '',
				showDialog: false,
				draftResone: '',
				department: [],
				fromDate: {},
				info: {
					id: '',
					status: 0,
					reason: ""
				},
				option: { //传参控制页面审批提示
					title: "我的审批",
					pass: true,
					msg: ""
				}
			}
		},
		methods: {
			dialogConfirm() {
				//弹出框确认操作
				if (this.draftResone.length) {
					this.showDialog = false;
					this.option.msg = "审批拒绝"
					this.option.pass = false
					this.refus()
				} else {
					this.$showToast('请输入拒绝理由');
				}
			},
			dialogCancel() {
				this.draftResone = ''
				this.showDialog = false;
			},

			draft() {
				this.showDialog = true;
			},

			pass() {
				this.option.msg = "审批通过"
				this.passed()

			},
			// 拒绝申请
			async refus() {
				this.info.status = 2
				this.info.reason = this.draftResone
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await Meeting.postAudit(this.info);
						uni.hideLoading();
						if (res.success) {
							if (res.code === 9527) {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							} else {
								uni.redirectTo({
									url: `../status/status?option=${JSON.stringify(this.option)}`
								});
							}


						} else {
							this.flag = true
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
						}
					} catch (e) {
						this.flag = true
						uni.hideLoading();
					}
				}
			},
			// 审批通过
			async passed() {
				this.info.status = 1
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await Meeting.postAudit(this.info);
						uni.hideLoading();
						if (res.success) {
							if (res.code === 9527) {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							} else {
								uni.$emit('refresh')
								uni.redirectTo({
									url: `../status/status?option=${JSON.stringify(this.option)}`
								});
							}

						} else {
							this.flag = true
							this.$showToast(res.msg);
						}
					} catch (e) {
						this.flag = true
						uni.hideLoading();
					}
				}
			},
			// 撤销申请
			async revocation() {
				this.option.msg = "撤销成功"
				this.info.status = 3
				this.option.title = '我的申请'
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await Meeting.postAudit(this.info);
						uni.hideLoading();
						if (res.success) {
							if (res.code === 9527) {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							} else {
								uni.$emit('refresh')
								uni.redirectTo({
									url: `../status/status?option=${JSON.stringify(this.option)}`
								});
							}
						} else {
							this.flag = true
							this.$showToast(res.msg);
						}

					} catch (e) {
						this.flag = true
						uni.hideLoading();
					}
				}
			},
			// 初始化表单
			async init() {
				try {
					this.$showLoading('加载中');
					const res = await Meeting.getDetail(this.id);
					uni.hideLoading();
					this.fromDate = res.data.detail;
					res.data.detail.apply_process.forEach(item => {
						if (!item.name.length) {
							this.department.push(item.identity)
						}
					})
				} catch (e) {
					uni.hideLoading();
				}
			},
		},
		computed: {
			...mapState(['windowHeight', 'userInfo']),
			showBtn() {
				let flag = false;
				for (let i = 0; i < this.department.length; i++) {
					if (!flag) {
						if (this.userInfo.user_permission.indexOf(this.department[i]) === -1) {
							flag = false
						} else {
							flag = true
						}
					}
				}
				return flag;
			}
		},
		onLoad(res) {
			this.type = res.msg
			this.id = res.id
			this.info.id = this.id
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .draft:after {
		border: none;
	}

	.content {
		padding: 30px 50rpx;
		font-size: 32rpx;

		.box {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30px;

			.box_right {
				box-sizing: border-box;
				padding-top: 4rpx;
				font-size: 28rpx;
				width: 420rpx;
				display: flex;
				justify-content: space-between;
				word-wrap: break-word;
				word-break: normal;
				word-break: break-all;
			}

			.box_tag {
				margin: 20px 0;
			}

			.date {
				box-sizing: border-box;
				padding-right: 100rpx;
			}

			.icon {
				position: absolute;
				top: -10px;
				right: 0;

				image {
					width: 150rpx;
					height: 150rpx;
				}

			}
		}



		.line {
			border-bottom: 1px solid #eaeaea;
			margin-bottom: 15px;
		}

		.title {
			font-size: 32rpx;
			color: #194769;
			font-weight: 900;
			margin-bottom: 20px;
		}

		.flow {
			.type:last-child {
				.line2 {
					height: 0 !important;
				}
			}
		}

		.type {
			position: relative;
			display: flex;

			.radio {
				width: 20rpx;
				height: 20rpx;
				background-color: #FAC52A;
				border-radius: 10rpx;
			}

			.line2 {
				width: 2rpx;
				height: 36px;
				background-color: #FAC52A;
				margin-left: 9rpx;
			}

			.msg {
				.reason {
					word-break: break-all;
					font-size: 32rpx;
					margin-top: 30rpx;
					margin-left: 20rpx;
					color: #999999;
				}
			}

			.msg_box {
				display: flex;
				justify-content: space-between;
				position: absolute;
				width: 610rpx;
				top: -5px;
				left: 40rpx;
				font-size: 32rpx;
				display: flex;
				color: #999999;

				.msg_tag {
					display: flex;

					.name {
						margin-right: 40rpx;

						.people {
							font-size: 32rpx;
							color: #194769;
						}
					}

					.no {
						color: #FF7543;
					}

					.yes {
						color: #39D4D1;
					}

				}

				.date {
					font-size: 28rpx;

					text {
						margin-left: 20rpx;
					}
				}
			}

		}


		.foot {
			margin-top: 20px;
			box-sizing: border-box;
			padding: 20upx 4upx;

			.btns {
				display: flex;
				justify-content: space-between;

				button {
					width: 300rpx;
					height: 30px;
					line-height: 30px;
					font-size: 28rpx;
					box-sizing: border-box;
				}

				.draft {
					color: #FFFFFF;
					margin-right: 50rpx;
					border-radius: 8rpx;
					background: url(../../static/images/meal/gary.png) no-repeat;
					background-size: 100% 100%;
				}

				.upload {
					border-radius: 8rpx;
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: #FFFFFF;
				}

				.revocation {
					border-radius: 8rpx;
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: #FFFFFF;
					margin-left: 180rpx;
				}
			}
		}
	}

	.draft_reason {
		position: relative;

		.textarea {
			box-sizing: border-box;
			margin: 10px 30rpx 10px 30rpx;
			width: 440rpx;
			text-align: left;
			font-size: 28rpx;
		}

		.mit {
			position: absolute;
			bottom: 6px;
			right: 40rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.photo {
		font-size: 32rpx;

		.image_box {
			width: 690rpx;
			display: flex;
			flex-wrap: wrap;
			margin: 10px 0 20px 0;

			.images {
				margin-top: 10px;
				margin-right: 20rpx;
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
</style>
